<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* text-decoration: none; */
            /* 清除列表 前面的序号/圆点 */
            list-style: none;
        }

        /* 页面背景色 */
        body {
            background: #f5f5f5;
        }

        .wrap {
            width: 1360px;
            overflow: hidden;
            margin: 15px auto;
            box-sizing: border-box;
            padding: 30px 60px;
        }

        /* 左边盒子 */
        .wrap .left {
            width: 234px;
            height: 614px;
            box-sizing: border-box;
            background: white;
            float: left;
            overflow: hidden;
            box-sizing: border-box;
        }

        /* 光标移入后的样式 */
        .wrap .left:hover,
        .wrap .right>div:hover {
            cursor: pointer;
            box-shadow:
                0.1px 0.1px 2.2px rgba(0, 0, 0, 0.014),
                0.3px 0.3px 5.3px rgba(0, 0, 0, 0.02),
                0.6px 0.6px 10px rgba(0, 0, 0, 0.025),
                1.1px 1.1px 17.9px rgba(0, 0, 0, 0.03),
                2.1px 2.1px 33.4px rgba(0, 0, 0, 0.036),
                5px 5px 80px rgba(0, 0, 0, 0.05);
            transform: scale(1.01, 1.01);
        }

        /* 右边盒子 */
        .wrap .right {
            width: calc(100% - 234px);
            height: 614px;
            float: left;
            box-sizing: border-box;
        }

        .right>div {
            width: 234px;
            height: 300px;
            box-sizing: border-box;
            background: white;
            float: left;
            margin: 0 0 15px 15px;
        }

        .right .list .listImg {
            width: 160px;
            height: 160px;
            margin: 15px auto;
            display: block;
        }

        .right .list .title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            margin-bottom: 15px;
        }

        .right .list .title,
        .right .list .desc,
        .right .list .price {
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .right .list .desc {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
        }

        .right .list .price {
            margin: 0 10px 10px;
            text-align: center;
            color: #ff6700;
        }

        .right .list .price del {
            color: #b0b0b0;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 左边 -->
        <div class="left">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d91bb6cf7da0947e8a6e50e03f4daf06.jpg?thumb=1&w=234&h=614&f=webp&q=90"
                alt="" srcset="">
        </div>
        <!-- 右边 -->
        <div class="right">
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price">699元起</div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price">699元起</div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price">699元起</div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price">699元起</div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price"><span>699元</span><del>999元</del></div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price"><span>699元</span><del>999元</del></div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price"><span>699元</span><del>999元</del></div>
            </div>
            <div class="list">
                <div class="listImg">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=160&h=160&f=webp&q=90"
                        alt="">
                </div>
                <div class="title">Redmi 12C</div>
                <div class="desc">高性能长续航，5000万像素超清双摄</div>
                <div class="price"><span>699元</span><del>999元</del></div>
            </div>
        </div>
    </div>
</body>

</html>